<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { reactive, onMounted, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { emitter } from '@/utils'
import { useSiteStore } from '@/store/siteinfo'
import { getSocialLink } from '@/utils/api/site'
import { getpresentationCategory, getArciclePresentation } from '@/utils/api/article'

const siteinfo = useSiteStore()

const route = useRoute()
const router = useRouter()

const _data = reactive({
  title: '',
  suffix: '',
  header_nav: [
    { name: '首页', url: '/', icon: 'czs-home-l' }
    // { name: '作品', url: '/category/theme', icon: 'czs-clothes-l' },
    // { name: '代码', url: '/category/code', icon: 'czs-code-l' },
    // { name: '随笔', url: '/category/essay', icon: 'czs-gift-l' }
  ],
  footer_nav: [
    // { name: '关于博主', url: '/about', icon: '' }
    // { name: '文章归档', url: '/archives', icon: '' }
    // { name: '友情链接', url: '/links', icon: '' }
  ],
  social_link: [
    // {
    //   name: 'Bilibili',
    //   url: 'https://space.bilibili.com/33882549',
    //   type: 0,
    //   icon: '/bilibili.png'
    // },
    // { name: 'Gitee', url: 'https://gitee.com/AlEX_2473', type: 'url', icon: '/gitee.png' }
  ],
  beian: {
    ICP: '苏ICP备2021054562号',
    GongAn: '沪公网安备31011002002436号'
  },
  // 文章小标题
  toc_list: []
})

const parseGongAn = (name) => {
  let match = name.match(/公网安备(\d+)号/)
  return match ? match[1] : null
}

const isCurrentPath = (url) => {
  // console.log(route.path == url)
  return route.path == url
}

const isArticle = computed(() => {
  return route.name == 'article' && !route.query.NotToArticle && _data.toc_list.length > 0
})

const RouterLink = (link, replase = false) => {
  replase ? router.replace(link) : router.push(link)
}

const NotToArticle = (path) => {
  router.push({
    path,
    query: {
      NotToArticle: true
    }
  })
}

const pushCategory = async () => {
  let data = await getpresentationCategory()
  data.map((o) => {
    _data.header_nav.push({
      name: o.articleClassifyName,
      url: '/category/' + o.id,
      icon: o.css
    })
  })

  // console.log(_data.header_nav)
}

const pushArcicle = async () => {
  let data = await getArciclePresentation()
  data.map((o) => {
    _data.footer_nav.push({
      name: o.articleTitle,
      url: '/article/' + o.id
    })
  })

  // console.log(_data.header_nav)
}

onMounted(async () => {
  await pushCategory()
  await pushArcicle()
  _data.social_link = await getSocialLink()
  let data = siteinfo.get()

  _data.title = data.siteTitle
  _data.suffix = data.suffix
  document.title = _data.title + _data.suffix
  _data.beian.ICP = data.ICP
  _data.beian.GongAn = data.GongAn

  emitter.on('on-toc-list', (e) => {
    if (e) {
      _data.toc_list = e
    }
  })
})

onUnmounted(() => {
  emitter.off('on-toc-list', () => {})
})
</script>

<template>
  <aside id="aside" class="off-canvas-sidebar">
    <div class="probes"></div>
    <section class="sticky">
      <input v-if="isArticle" type="radio" id="tab-toc" name="aside-radio" hidden checked />
      <input v-if="isArticle" type="radio" id="tab-nav" name="aside-radio" hidden />

      <ul class="aside-tab" v-if="isArticle">
        <li class="toc-active">
          <label for="tab-toc" class="c-hand flex flex-center"><i class="czs-read-l"></i></label>
        </li>
        <li class="nav-active">
          <label for="tab-nav" class="c-hand flex flex-center">
            <i class="czs-choose-list-l"></i>
          </label>
        </li>
      </ul>

      <ul class="toc-list toc-content" v-if="isArticle">
        <li
          class="toc-item nav-item"
          v-for="(item, index) in _data.toc_list"
          :key="index"
          style="text-indent: 0em"
        >
          <a :href="`#${item.uuid}`">{{ item.title }}</a>
        </li>
      </ul>

      <ul id="menu-header" class="header_nav reset-ul uni-bg uni-shadow">
        <li
          v-for="(item, index) in _data.header_nav"
          :key="index"
          class="menu-item menu-item-type-custom menu-item-object-custom"
          :class="[item.icon, { 'current-item': isCurrentPath(item.url) }]"
        >
          <a @click="RouterLink(item.url)">{{ item.name }}</a>
        </li>
      </ul>

      <ul id="menu-bottom" class="footer_nav reset-ul uni-bg uni-shadow">
        <li
          v-for="(item, index) in _data.footer_nav"
          :key="index"
          class="menu-item menu-item-type-post_type menu-item-object-page"
          :class="[
            item.icon,
            {
              'menu-item-has-children': item.children,
              'current-item': isCurrentPath(item.url)
            }
          ]"
        >
          <a @click="NotToArticle(item.url)">{{ item.name }}</a>
          <ul v-if="item.children" class="sub-menu">
            <li
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
              class="menu-item menu-item-type-post_type menu-item-object-page"
              :class="[item.icon, { 'current-item': isCurrentPath(item.url) }]"
            >
              <a @click="RouterLink(child.url)">{{ child.name }}</a>
            </li>
          </ul>
        </li>
      </ul>

      <div>
        <div v-if="_data.social_link && _data.social_link.length > 0" style="margin-bottom: 1rem">
          <ul class="reset-ul uni-bg uni-shadow flex-center widget_block">
            <template v-for="(item, index) in _data.social_link" :key="index">
              <li class="social-link">
                <a :href="item.link">
                  <template v-if="item.type == 0">
                    <img
                      :src="item.icon"
                      :alt="item.name"
                      style="width: 24px; height: 24px; border-radius: unset"
                    />
                  </template>
                  <template v-else-if="item.type == 1">
                    <i :title="item.name" :class="item.icon"></i>
                  </template>
                </a>
              </li>
            </template>
          </ul>
        </div>

        <div v-if="_data.beian" style="font-size: 0.65rem">
          <ul
            class="reset-ul uni-bg uni-shadow flex-center widget_block"
            style="flex-direction: column"
          >
            <a href="https://beian.miit.gov.cn/" v-if="_data.beian.ICP">{{ _data.beian.ICP }}</a>
            <a
              v-if="_data.beian.GongAn"
              :href="`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${parseGongAn(_data.beian.GongAn)}`"
              >{{ _data.beian.GongAn }}</a
            >
          </ul>
        </div>
      </div>
    </section>
  </aside>
  <a class="off-canvas-overlay" href="#close"></a>
</template>

<style scoped lang="scss"></style>
